<template>
  <div class="join-detail">
    <van-sticky>
      <van-nav-bar :title="$route.meta.title" left-arrow @click-left="onClickLeft" style="width:100%;" />
    </van-sticky>
    <div class="join-shop-info">
      <van-cell-group>
        <van-field label="店铺名" :value="eInfo.shopname" input-align="right" disabled />
        <van-field label="手机号" :value="eInfo.telphone" input-align="right" disabled />
        <van-cell value-class="join-cell-right" title="地址" :value="eInfo.province + '/' + eInfo.city + '/' + eInfo.area" disabled />
        <van-field label="店铺详细地址" :value="eInfo.address" input-align="right" disabled />
      </van-cell-group>
    </div>
    <div class="IDcard-pic">
      <div class="title">
        <p>身份证</p>
      </div>
      <div class="pic">
        <div class="showImg mg-right" @click="getPic(img+eInfo.idcardimg1)">
          <van-image fit="cover" radius="15" :src="img+eInfo.idcardimg1" />
        </div>
        <div class="showImg" @click="getPic(img+eInfo.idcardimg2)">
          <van-image fit="cover" radius="15" :src="img+eInfo.idcardimg2" />
        </div>
      </div>
    </div>
    <div class="bankcard-pic">
      <div class="title">
        <p>银行卡</p>
      </div>
      <div class="pic">
        <div class="showImg mg-right" @click="getPic(img+eInfo.bankcardimg1)">
          <van-image fit="cover" radius="15" :src="img+eInfo.bankcardimg1" />
        </div>
        <div class="showImg" @click="getPic(img+eInfo.bankcardimg2)">
          <van-image fit="cover" radius="15" :src="img+eInfo.bankcardimg2" />
        </div>
      </div>
    </div>
    <div class="licence-pic">
      <div class="title">
        <p>营业执照</p>
      </div>
      <div class="pic-col">
        <div class="showImg-col" @click="getPic(img+eInfo.licenseimg)">
          <van-image fit="cover" radius="15" :src="img+eInfo.licenseimg" />
        </div>
      </div>
    </div>
    <div class="reasons" v-if="idx!=0">
      <van-field v-model="reasons" rows="4" autosize label="审核意见" type="textarea" maxlength="100" placeholder="请输入审核意见及理由" show-word-limit required />
    </div>
    <div class="reasons" v-if="idx==0">
      <van-field v-model="eInfo.reasons" rows="4" autosize label="审核意见" type="textarea" placeholder="请输入审核意见及理由" show-word-limit disabled />
    </div>
    <br>
    <div class="opera" v-if="idx!=0">
      <van-button round type="default" @click="approvaling(3)">不通过</van-button>
      <van-button round type="danger" color="#ff976a" @click="approvaling(2)">通过</van-button>
    </div>
  </div>
</template>

<script>
import { ImagePreview, Toast } from "vant";
export default {
  name: "JoinDetail",
  data () {
    return {
      id: '',
      idx: '', // 用于判断当前店铺是否审批过,传0则不显示操作按钮
      reasons: '',
      eInfo: {},
    };
  },
  methods: {
    onClickLeft () {
      this.$router.push({ name: 'join', query: { active: 1, } })
    },
    // 审批: 2-通过/3-拒绝
    approvaling (state) {
      this.$axios("/index/checkshops", {
        id: this.id,
        handle: "ajax", //不填即返回数据，填即是提交审核
        state: state, //2-审核通过；3-审核拒绝
        reasons: this.reasons //审核意见
      })
        .then((res) => {
          if (res.data.code == 1) {
            Toast.success("已审批");
            setTimeout(() => {
              this.$router.push({ name: "join", query: { active: 1, } });
            }, 1000);
          } else {
            Toast.fail("操作失败");
          }
        });
    },
    getPic (img) {
      var aa = [img];
      ImagePreview({
        images: aa, //需要预览的图片URL 数组
        startPosition: 0,
        showIndex: false,
      });
    },
  },
  created () {
    this.id = this.$route.query.sid;
    this.idx = this.$route.query.index;
    this.$axios("/index/checkshops", {
      id: this.id,
    })
      .then((res) => {
        if (res.data.code == 1) {
          this.eInfo = res.data.data
        } else {
          Toast.fail(res.data.msg);
        }
      });
  },
};
</script>
<style lang="less" scoped>
.join-detail {
  display: flex;
  flex-direction: column;
  /deep/.van-image__img {
    /* 禁止长按图片保存 */
    pointer-events: none;
  }
  .opera {
    /deep/ .van-button--round {
      width: 200px;
      height: 80px;
      font-size: 35px;
      font-weight: bold;
      box-shadow: 0 5px 5px rgba(37, 26, 26, 0.1);
    }
  }
  .showImg {
    display: flex;
    justify-content: center;
    width: 100%;
    /deep/ .van-image {
      width: 100%;
      height: 200px;
    }
  }
  .showImg-col {
    display: flex;
    justify-content: center;
    width: 100%;
    /deep/ .van-image {
      width: 100%;
      height: 300px;
    }
  }
  .join-shop-info {
    /deep/ .van-cell__title {
      color: black;
    }
  }
  .reasons /deep/ .van-field__value,
  .remark /deep/ .van-field__value {
    box-sizing: border-box;
    padding: 15px;
    background-color: #f5f5f5;
    border-radius: 10px;
  }
  .reasons /deep/ .van-field__label,
  .remark /deep/ .van-field__label {
    color: black;
  }
  .IDcard-pic,
  .bankcard-pic,
  .licence-pic {
    display: flex;
    flex-direction: column;
  }
  .title {
    font-size: 0.45rem;
    text-indent: 30px;
    padding: 20px 0;
  }
  .pic {
    display: flex;
    flex-direction: row;
    padding: 20px;
  }
  .pic-col {
    display: flex;
    flex-direction: column;
    padding: 0 30px;
  }
  .mg-right {
    margin-right: 15px;
  }
  .opera {
    display: flex;
    width: 80%;
    justify-content: space-around;
    margin: 50px auto;
  }
  .reasons,
  .remark {
    display: flex;
    margin-top: 15px;
  }
  .join-cell-right {
    color: #c8c9cc !important;
  }
}
</style>